<template>
  <div class="usernifo">
    <van-cell-group>
      <van-cell title="头像" value="内容" is-link>
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="1"
          :after-read="afterRead"
        />
      </van-cell>
    </van-cell-group>
    <!-- 昵称 -->
    <van-cell is-link title="昵称" @click="show = true" />
    <div class="username">{{ user.name || user.phone }}</div>
    <van-action-sheet v-model="show" title="修改昵称">
      <div class="content">
        <van-cell-group>
          <van-field
            v-model="value"
            label="昵称"
            placeholder="请输入需要修改的昵称"
          />
        </van-cell-group>
        <van-button type="primary" block @click="xxx">保存</van-button>
      </div>
    </van-action-sheet>
    <!-- 性别 -->
    <van-cell is-link title="性别" @click="show1 = true" />
    <div class="sex">{{ user.gender || "未设置" }}</div>
    <van-action-sheet
      v-model="show1"
      :actions="actions"
      @select="onSelect"
      description="更改性别"
      cancel-text="取消"
    />
    <!-- 出生日期 -->
    <div class="age">{{ user.birth || "未设置" }}</div>
    <van-cell is-link title="出生日期" @click="show2 = true" />
    <van-action-sheet v-model="show2" title="出生日期">
      <div class="content">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          @confirm="confirm"
        />
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { Toast } from "vant"
import { getimg, getusename, getsex, getage } from "../../api/getlogin"
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      fileList: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      show: false,
      show1: false,
      date: "",
      show2: false,
      text: "",
      username: "",
      value: "",
      sex: "未设置",
      actions: [{ name: "男" }, { name: "女" }],
      age: "未设置",
      currentDate: ""
    }
  },
  created() {
    this.value = this.username
    this.fileList = [{ url: this.$store.state.user.user.avatar || 'http://10.41.154.18:3000/img/nologin.png' }]
  },
  computed: {
    ...mapGetters({
      user: "user/user",
      isLogin: "user/isLogin"
    })
  },
  methods: {
    confirm() {
      const res = this.currentDate.toLocaleDateString()
      this.show2 = false
      getage(res, this.user.id)
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中"
      })

      let second = 3
      const timer = setInterval(() => {
        second--
        if (second) {
          toast.message = `加载中`
        } else {
          clearInterval(timer)
          // 手动清除 Toast
          Toast.clear()
        }
      }, 200)
      this.age = res
      const newUser = this.$store.state.user.user
      newUser.birth = `${this.age}`
      this.$store.commit("user/setUser", newUser)
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm(date) {
      this.show2 = false
      this.date = this.formatDate(date)
    },
    async afterRead(file) {
      file.status = "uploading"
      file.message = "上传中..."

      setTimeout(() => {
        file.status = "done"
        file.message = ""
      }, 1000)
      // 此时可以自行将文件上传至服务器
      console.log(file.content)
      const res = await getimg(this.user.id, file.content)
      console.log(241421, res.data.data.url)
      const newUser = this.$store.state.user.user
      newUser.avatar = res.data.data.url
      console.log(newUser)
      this.$store.commit("user/setUser", newUser)
      console.log(this.$store.state.user.user)
    },
    xxx() {
      this.username = this.value
      Toast("修改成功")
      getusename(this.user.id, this.username)
      const newUser = this.$store.state.user.user
      newUser.name = `${this.value}`
      this.$store.commit("user/setUser", newUser)
      console.log(111, this.$store.state.user.user.name)
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show1 = false
      this.sex = item.name
      getsex(this.sex, this.user.id)
      const newUser = this.$store.state.user.user
      newUser.gender = `${this.sex}`
      this.$store.commit("user/setUser", newUser)
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中"
      })

      let second = 3
      const timer = setInterval(() => {
        second--
        if (second) {
          toast.message = `加载中`
        } else {
          clearInterval(timer)
          // 手动清除 Toast
          Toast.clear()
        }
      }, 100)
    }
  }
}
</script>
<style lang="scss">
.usernifo {
  margin-top: 20px;
  .van-uploader {
    margin-top: 5px;
  }
  .van-uploader__upload {
    width: 60px;
    height: 60px;
  }
  .van-uploader__preview-image {
    width: 60px;
    height: 60px;
  }
  .van-image__img {
    width: auto;
  }
  .van-cell__right-icon {
    line-height: 70px;
  }
  .van-cell__title {
    line-height: 70px;
    font-size: 18px;
  }
  .van-cell {
    padding: 3px 10px;
  }
  .username {
    position: absolute;
    top: 174px;
    right: 9%;
  }
  .sex {
    position: absolute;
    top: 246px;
    right: 9%;
  }
  .age {
    position: absolute;
    z-index: 2;
    top: 324px;
    right: 9%;
  }
  .content {
    padding: 16px 16px 230px;
  }
  .van-field__control {
    padding: 24px 0;
  }
  .van-button--block {
    margin-top: 50px;
  }
}
</style>
